<!-- 企业信息管理 -->
<template>
  <div class="app-wrapper">
    <headerTitle
      :titleList="titleList"
      :hideButton="true"
      :btnTitle="'新增企业'"
      icon="iconfont icon-company"
      @handelClick="() => add()"
    />
    <div class="app-container">
      <div class="block containerMain" ref="block">
        <div v-if="adapt" class="searchList">
          <div class="search-item">
            <div class="item-list">
              <div class="item-con">
                <span>企业编号</span>
                <el-input
                  size="mini"
                  class="item"
                  v-model="searchform.entNum"
                  placeholder="请输入企业编号"
                ></el-input>
              </div>
              <div class="item-con">
                <span>企业名称</span>
                <el-input
                  size="mini"
                  class="item"
                  v-model="searchform.entName"
                  placeholder="请输入企业名称"
                ></el-input>
              </div>


            </div>
            <div class="item-btn">
              <el-button size="mini" class="kyeup_search_btn" type="primary" @click="getEntList()"
                >查询</el-button
              >
              <el-button size="mini" type="primary" @click="resetForm()"
                >重置</el-button
              >
            </div>
          </div>

        </div>
        <div class="table">
          <el-table
            size="small"
            :header-cell-style="headerStyle"
            :data="tableData"
            :height="tableHeight"
            style="width: 100%;margin:0 auto"
          >
            <el-table-column
              prop="id"
              label="ID"
              v-if="hiddenID"
            ></el-table-column>
            <el-table-column prop="entNum" label="企业编号"></el-table-column>
            <el-table-column prop="entName" label="企业名称" width="230px"></el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间"
              width="200"
            >
            <template slot-scope="scope">
                <span>{{ scope.row.createTime?scope.row.createTime.substring(0,scope.row.createTime.length-3):''}}</span>
              </template></el-table-column>
            <el-table-column prop="enable" label="状态" width="80px">
              <template slot-scope="scope">
                <span>{{ scope.row.enable | statusFilter }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="260px">
              <template slot-scope="scope">

                <div>
                  <el-button
                    type="text"
                    size="mini"
                    @click="view(scope.row.entNum)"
                    >详情</el-button
                  >
                </div>



              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <pagination :pagination="pagination" />
  </div>
</template>
<script>
import Pagination from "@/components/Pagination/index";
import HeaderTitle from "@/components/Headertitle/index";
import {
  getEntList,
  del,
} from "@/api/enterpriseinfo";
import { pageParams } from "@/settings";
export default {
  data() {
    return {
      cancelDialog: false,

      hiddenID: false,
      titleList: [{ title: "企业权限管理" }],
      toggleBoo: true,
      searchform: {
        entNum: "", // 企业编号
        entName: "", // 企业名称
        page: 1,
        rows: 10
      },
      clientIdArr: [],
      listLoading: true, // loading加载
      industryList: [],
      serviceList:[],
      tableData: [], //表格数据
      tableHeight: "300", //表格默认高度
      total: 0, //表格条数总计
      pagination: pageParams, //分页
      entName: "测试企业一",
      entNum: "2019082301",
      adapt: true,
    };
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: "正常",
        2: "注销"
      };
      return statusMap[status];
    }
  },
  mounted() {
    if(document.body.clientWidth>1700){
      this.adapt = false;
    }
    if(document.body.clientWidth<=1700) {
      this.adapt = true;
    }
    this.$nextTick(() => {
      let self = this;
      this.tableHeight = this.$refs.block.offsetHeight - 80;
      window.onresize = () => {
        return (() => {
          if(document.body.clientWidth>1700){
            this.adapt = false;
          }
          if(document.body.clientWidth<=1700) {
            this.adapt = true;
          }
          this.tableHeight = this.$refs.block.offsetHeight - 80;
        })();
      };
    });
    if(this.$route.params.searchShow && window.sessionStorage.getItem("searchObj")!=null){
      let searchObj = JSON.parse(window.sessionStorage.getItem("searchObj"));
      this.searchform = JSON.parse(JSON.stringify(searchObj));
      if(this.searchform.clientId!=""){
        const arr = this.searchform.clientId.split(',');
        arr.forEach(el => {
          // console.log(typeof(el),el, "el")
          this.clientIdArr.push(parseInt(el))
        })
      }
    }
    this.getEntList();
  },
  components: {
    Pagination,
    HeaderTitle
  },
  watch: {
    toggleBoo:function(newval,oldval){
      if(!newval){
        this.tableHeight = this.$refs.block.offsetHeight - 120;
      }else{
        this.tableHeight = this.$refs.block.offsetHeight - 80;
      }

    },
    tableHeight(val, old) {
      this.tableHeight = val;
    },
    // 分页
    "pagination.currentPage": function() {
      this.searchform.page = this.pagination.currentPage;
      this.getEntList(this.searchform);
    },
    "pagination.pageSize": function() {
      this.searchform.rows = this.pagination.pageSize;
      this.searchform.page = 1;
      this.getEntList(this.searchform);
    }
  },
  methods: {
    //按钮权限校验
    reload(){
      this.searchform.rows = this.pagination.pageSize;
      this.pagination.currentPage =1;
      this.getEntList()
    },
    getEntList() {
    //   this.searchform.clientId = this.clientIdArr.join(',');
      this.searchform.rows = this.pagination.pageSize;
      getEntList({ ...this.searchform }).then(response => {
        this.tableData = response.data.rows;
        this.pagination.total = response.data.records;
        this.listLoading = false;
      });
    },
    //表头背景颜色修改
    headerStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 0) {
        return "background:#F5F6FB;color:#666";
      }
    },
    //查看企业账号信息
    view(id){
      this.$router.push({
        name: "authControl",
        params: { entNum: id }
      });
    },
    resetForm() {
      this.searchform = {
        entNum: "", // 企业编号
        entName: "", // 企业名称
        page: 1,
        rows: 10
      };
      this.clientIdArr = [];
      this.reload();
    }
  }
};
</script>
<style lang="scss" scoped>
label {
  font-weight: 100;
}
.app-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  .app-container {
    flex: 1;
    height: 100%;
    // background: #f1f3f7;
    // padding: 20px;
    .block {
      width: 100%;
      height: 100%;
      background: #fff;
      .server {
        height: 40px;
        line-height: 40px;
        color: #409eff;
        .title {
          padding-left: 20px;
        }
      }
      .searchList {
        padding: 20px 10px;
        // display: flex;
        // justify-content: space-between;
        // flex-wrap: wrap;
        .search-item {
          font-size: 14px;
          color: #333;
          display: flex;
          justify-content: space-between;
          .item-list{
            display: flex;
            flex-wrap: wrap;
          }
          .item-con {
            display: flex;
            margin-right: 30px;
            span {
              display: inline-block;
              width: 60px;
              text-align: right;
              line-height: 28px;
              margin-right: 10px;
            }
          }
          .item {
            width: 180px;
            margin-right: 10px;
          }
        }
      }
    }
  }
  .infoFormSty {
    display: flex;
    span {
      display: inline-block;
      color: #999;
      font-size: 13px;
      margin-left: 20px;
    }
  }
  .detail-header {
    display: flex;
    justify-content: space-around;
    .detail-title {
      flex: 1;
      text-align: left;
    }
    .detail-btn {
      flex: 1;
      text-align: right;
    }
  }
  .detail-container {
    margin-top: 10px;
    display: flex;
    .detail-tab {
      width: 100%;
      .tab-header {
        color: #666;
      }
      .tab-container {
        width: 100%;
        margin-top: 15px;
      }
    }
  }
}
</style>

